<template>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-12">
        <h2 class="text-primary"><i class="fas fa-search"> Product Search</i></h2>
      </div>
    </div>
    <div class="row mt-3 border rounded shadow-sm" style="padding: 10px 10px 10px 0">
      <div class="col-md-12">
        <i class="fas fa-home"></i> Home&nbsp;&nbsp;/&nbsp;&nbsp;
        <i class="fas fa-search"></i> Intelligence Search&nbsp;&nbsp;/&nbsp;&nbsp;
        <i class="fas fa-dice-d6"></i> Product Search
      </div>
    </div>
    <div class="row mt-5 mb-5">
      <div class="col-md-9 offset-md-2">
        <div class="form-inline">
          <input type="text" class="form-control"
                 placeholder="please input the product name you want to query..."
                 style="width: 70%;height: 50px;font-size: 18px"
                 v-model="productName">
          <button class="btn btn-primary" style="width:100px;height: 50px" v-on:click="selectProduct">Search
          </button>
        </div>
      </div>
    </div>

    <div class="row mt-5 mb-5 border rounded shadow-sm" v-show="panel1">
      <div class="col-md-12" style="padding-top: 10px; background-color: #dee2e6">
        <h3>Products with same vulnerabilities</h3>
      </div>
      <div class="col-md-12 p-3">
        <div class="row mt-1" id="product_app">
          <div class="col-12">
            <h5>Products List</h5>
            <ul>
              <li v-for="(p,index) in productList" :key="index">
                {{p}}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-5 mb-5 border rounded shadow-sm" v-show="panel2">
      <div class="col-md-12" style="padding-top: 10px; background-color: #dee2e6">
        <h3>Reasoning Base</h3>
      </div>
      <RelationGraph/>
    </div>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import RelationGraph from '../../components/entity-info/RelationGraph'
import { reqProduct } from '../../api/api-index'

export default {
  name: 'ProductSearch',
  components: { RelationGraph },
  data () {
    return {
      panel1: false,
      panel2: false,
      productName: '',
      productList: null
    }
  },
  methods: {
    selectProduct () {
      const productName = this.productName.trim()
      reqProduct(productName).then(response => {
        this.panel1 = true
        this.panel2 = true

        const nodes = response.tripleRelation.singleNodeList
        const edges = response.tripleRelation.singleRelationList
        const config = { height: 800 }
        PubSub.publish('relChartData', { nodes, edges, config })

        let products = []
        nodes.forEach(function (item, index) {
          if (item.type === 'OS' || item.type === 'Software' || item.type === 'Hardware') {
            products.push(item.name)
          }
        })

        this.productList = products
      })
    }
  }
}
</script>

<style scoped>

</style>
